<template>
    <!--banner轮播-->
    <div class="swiper-container" :ref="bannerSwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" 
            v-for="(banner) in bannerList" 
            :key="banner.id">
                <img :src="banner.imgUrl" />
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'SwiperLoop',
  props:['bannerList','bannerSwiper'],
    // 数据监视
  watch:{
      // 采用watch可以保证,数据一定先回来,然后在去实例化swiper,也不行
      // 原因: 因为数据回来是回来的,数据回来后,页面形成也是需要时间的
      //监视的数据 配置对象
      bannerList:{
          immediate:true,//这里的immediate没任何意义,只是为了代码保持一致
          handler(newVal, oldVal){
              //等待页面最近一次更新后完成回调
              this.$nextTick(()=>{ 
                new Swiper(this.$refs[this.bannerSwiper], {
                // direction: "vertical", // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: ".swiper-pagination",
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },

                // 如果需要滚动条
                // scrollbar: {
                //   el: ".swiper-scrollbar",
                // },
                });
            })
          }
      }
  },
}
</script>

<style lang="less" scoped>

</style>
